<template>
  <el-card class="review">
    <el-dialog
      v-if="displayUrl"
      :visible.sync="dialogFormVisible"
    >
      <img
        :src="displayUrl"
        width="100%"
      >
    </el-dialog>
    <el-form
      :inline="true"
      size="mini"
      :model="filterOption"
      class="member-list-filter"
    >
      <el-form-item>
        <el-input v-model="filterOption.studentId">
          <template slot="prepend">学号</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="filterOption.name">
          <template slot="prepend">姓名</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="filterOption.applyStatus">
          <template slot="prepend">状态</template>
        </el-input>
      </el-form-item>
      <!-- <el-form-item>
        <el-button size="mini" @click="exportDataToExcel">导出当前表成Excel文件</el-button>
      </el-form-item> -->
    </el-form>
    <el-table
      size="mini"
      :data="applyList"
      stripe
      border
    >
      <el-table-column type="index">
      </el-table-column>
      <el-table-column
        label="基本信息"
        width="120"
      >
        <template slot-scope="scope">
          <p><span class="apply-from-field">姓名：</span>{{ scope.row.name }}</p>
          <p><span class="apply-from-field">班级：</span>{{ scope.row.className }}</p>
          <p><span class="apply-from-field">学号：</span>{{ scope.row.studentId }}</p>
          <p><span class="apply-from-field">性别：</span>{{ scope.row.gender === 1 ? "男" : "女" }}</p>
        </template>
      </el-table-column>
      <el-table-column
        label="联系方式"
        width="160"
      >
        <template slot-scope="scope">
          <p><span class="apply-from-field">邮箱：</span>{{ scope.row.email }}</p>
          <p><span class="apply-from-field">手机：</span>{{ scope.row.phoneNumber }}</p>
          <p><span class="apply-from-field">微信：</span>{{ scope.row.wechat }}</p>
        </template>
      </el-table-column>
      <el-table-column label="自我介绍">
        <template slot-scope="scope">
          <p><span class="apply-from-field">照片：</span><img
              :src="scope.row.portrait || 'https://s1.ax1x.com/2018/12/05/FlGns0.jpg'"
              alt="没有上传"
              width="200px"
              @click="dialogFormVisible = true, displayUrl = scope.row.portrait"
            ></p>
          <p><span class="apply-from-field">提交时间：</span>{{ scope.row.postDate }}</p>
          <p><span class="apply-from-field">主攻方向：</span>{{ scope.row.major }}</p>
          <p>
            <span class="apply-from-field">补充介绍：</span>
            <el-card
              class="introduce-card"
              shadow="never"
            >{{ scope.row.introduce }}</el-card>
          </p>
        </template>
      </el-table-column>
      <el-table-column
        prop="state"
        label="审核状态"
        width="98"
        :filters="applyStatusFilters"
        :filter-method="filterState"
      >
        <template slot-scope="scope">
          <el-tag :type="applyStatus[scope.row.state].type">{{ applyStatus[scope.row.state].text }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="60"
      >
        <template slot-scope="scope">
          <el-button
            type="success"
            icon="el-icon-check"
            @click="changeApplyStatus(scope.row.id, APPLY_STATUS.PASSED, scope.$index)"
            circle
          ></el-button>
          <el-button
            type="warning"
            icon="el-icon-close"
            @click="changeApplyStatus(scope.row.id, APPLY_STATUS.FAILED, scope.$index)"
            circle
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="handleDeleteButtonClick(scope.row.id)"
            circle
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-message"
            @click="handleMigrateButtonClick(scope.row.id)"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import api from "../api.js";
import { APPLY_STATUS, APPLY_STATUS_TITLE } from "../utils/constants";

export default {
  data() {
    return {
      dialogFormVisible: true,
      displayUrl: '',
      applyList: [],
      APPLY_STATUS,
      applyStatus: APPLY_STATUS_TITLE,
      applyStatusFilters: [
        { text: "await", value: APPLY_STATUS.AWAIT },
        { text: "passed", value: APPLY_STATUS.PASSED },
        { text: "failed", value: APPLY_STATUS.FAILED },
      ],
      filterOption: {}
    };
  },
  created() {
    this.updateTableData();
  },
  methods: {
    filterState(value, row, column) {
      console.log(row.state);
      return row.state === value;
    },

    async updateTableData() {
      try {
        const { data } = await api.getAllApplyForm();
        this.applyList = data.data.map((val) => {
          return {
            ...val,
            postDate: new Date(val.postDate * 1000).toLocaleString()
          };
        });
      } catch (error) {
      }
    },
    async changeApplyStatus(id, state, index) {
      if (this.applyList[index].state === state) {
        state = 0;
      }
      const oldState = this.applyList[index].state;
      this.applyList[index].state = state;
      try {
        const { data } = await api.changeApplyStatus({
          params: {
            id
          },
          data: {
            state
          }
        });
        this.$message.success("修改成功");
      } catch (error) {
        this.$message.error("修改失败");
        this.applyList[index].state = oldState;
      }
    },
    async handleDeleteButtonClick(id) {
      try {
        await this.$confirm("此操作将永久删除该表, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        });
        await api.deleteApplyForm({
          id
        });
        this.$message.success("删除成功");
        this.updateTableData();
      } catch (error) {
      }
    },
    async handleMigrateButtonClick(id) {
      try {
        await this.$confirm("此操作会将申请者升级成工作室成员 是否继续操作?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        });
        await api.migrateApplyForm({
          id
        });
        this.$message.success("升级成功");
        this.updateTableData();
      } catch (error) {
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.el-button {
  margin: 8px 0 !important;
  display: block;
}
.review {
  margin: 0 auto;
  width: 100%;
  max-width: 1280px;
}
.apply-from-field {
  color: #87a6e4;
  font-weight: 600;
  display: block;
}
.introduce-card {
  width: 100%;
  max-width: 640px;
  white-space: pre-line;
}
</style>
